import {createApp} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')
/*

slot 通俗的理解就是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中slot位置）
并且可以作为承载分发内容的出口
vue中将slot元素作为承载分发内容的出口，在封装组件中，使用特殊的元素slot就可以封装组件开启一个插槽，该插槽插入什么内容取决于父组件如何使用
插槽分为：默认插槽、具名插槽、作用域插槽

默认插槽
    子组件中使用<slot>元素进行占位
    父组件在使用子组件的时候往组件标签中间插入对应的结构即可
插槽的默认内容
    有时候我们希望在使用插槽时，如果没有插入对应的内容那么需要显示一个默认的内容
    这个默认的内容只会在没有提供插入的内容时才会显示

具名插槽
    具名插槽顾名思义就是给插槽取一个名字，<slot>元素有一个特殊的属性 name 一个不带name的slot会带有隐含的名字default
    具名插槽就是给我们的插槽起一个名字，即给<slot></slot>定义一个name属性。
    给插槽起了名称以后，我们在父组件中就可以使用v-slot:name或者#name往指定的插槽填充内容。

v-slot:用于声明具名插槽或是期望接收 props 的作用域插槽。
    缩写：#
    期望的绑定值类型：能够合法在函数参数位置使用的 JavaScript 表达式。支持解构语法。绑定值是可选的——只有在给作用域插槽传递 props 才需要。
    参数：插槽名 (可选，默认是 default)
    仅限：<template>components (用于带有 prop 的单个默认插槽)

作用域插槽
    有时让插槽内容能够访问子组件中才有的数据是很有用的。显然作用域插槽的作用就是使父组件能够引用子组件中的数据。
* */